<!--
 * @Author: cjy
 * @Date: 2020-09-16 14:51:11
 * @LastEditors: Please set LastEditors
 * @Descripttion: 
 * @LastEditTime: 2021-03-23 18:32:04
 * @FilePath: \vue-openlayers\src\views\firstMap\FirstMap.vue
-->
<template>
  <div class="vm">
    <h2 class="h-title">加载天地图底图</h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import { Logo, TileSuperMapRest, GetFeaturesBySQLParameters,FeatureService } from '@supermap/iclient-ol';
import * as control from 'ol/control'
import SourceVector from 'ol/source/Vector'
import LayerVector from 'ol/layer/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import XYZ from 'ol/source/XYZ'

export default {
  name: 'FirstMap',
  data () {
    return {
      map: null
    }
  },
  methods: {
    initMap () {
      // 地图实例
      this.map = new Map({
        controls: control.defaults({ zoom: false}),
        target: "map", 
        layers: [ 
          // new Tile({
          //     source: new TileSuperMapRest({
          //         url: "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World",
          //         wrapX: true
          //     }),
          //     projection: 'EPSG:4326'
          // })
          new Tile({
            // source: new OSM() // OSM图层数据源
            source: new XYZ({
              url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          }),
          new Tile({
            source: new XYZ({
              url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            })
          })
        ],
        view: new View({ 
          projection: "EPSG:4326", 
          center: [70.064839, 32.548857], 
          zoom: 2
        })
      })

      this.superMapDataServicesQuery();
    },
    superMapDataServicesQuery(){
        //
        // let testUrl = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
        // let testSqlParam = new GetFeaturesBySQLParameters({
        //     queryParameter: {
        //         name: "Countries@World",
        //         attributeFilter: "CONTINENT='欧洲'"
        //     },
        //     datasetNames: ["World:Countries"],
        //     fromIndex: 0,
        //     toIndex: 200
            
        // });
        // new FeatureService(testUrl).getFeaturesBySQL(testSqlParam, (serviceResult) => {
        //     console.log(serviceResult, "=========test===========")
        //     let vectorSource = new SourceVector({
        //         features: (new GeoJSON()).readFeatures(serviceResult.result.features),
        //         wrapX: false
        //     });
        //     let resultLayer = new LayerVector({
        //         source: vectorSource
        //     });
        //     this.map.addLayer(resultLayer);
        // });



        //
        let url = "http://172.20.11.103:8090/iserver/services/data-SC_ADM/rest/data";
        let sqlParam = new GetFeaturesBySQLParameters({
            queryParameter: {
                name: "SC_ADM_CITY@SC_ADM",
                // name: "SC_ADM_CITY@SC_ADM",
                attributeFilter: "PARENT = '四川省'",
                // attributeFilter: "SMID = 1",
                // method: "GET"
            },
            datasetNames: ["SC_ADM:SC_ADM_CITY"], 
            fromIndex: 0,
            toIndex: 20
        });
        new FeatureService(url).getFeaturesBySQL(sqlParam, (serviceResult) => {
            console.log(serviceResult, "=========SC_ADM_CITY===========")
            let vectorSource = new SourceVector({
                features: (new GeoJSON()).readFeatures(serviceResult.result.features),
                wrapX: false
            });
            let resultLayer = new LayerVector({
                source: vectorSource
            });
            this.map.addLayer(resultLayer);
        });


    }
  },
  mounted () {
    this.initMap();
    
  }
}
</script>

<style lang="scss" scoped>
  
</style>